import { Button, Card, Modal, Table, TableColumnsType, Image } from "antd";
import { SoapOpera } from "../../../Types/SoapOpera";
import { TableComponentProps } from "../../../Types/TableComponent";

function TableComponent(props: TableComponentProps<SoapOpera>) {
  const columns: TableColumnsType<SoapOpera> = [
    {
      title: "封面",
      key: "cover",
      render: (text, record) => {
        return (
          <>
            <Image src={record.cover}></Image>
          </>
        );
      },
    },
    {
      title: "剧名",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "类型",
      dataIndex: "type",
      key: "type",
    },
    {
      title: "导演",
      dataIndex: "director",
      key: "director",
    },
    {
      title: "描述",
      dataIndex: "description",
      key: "description",
    },
    {
      title: "年份",
      dataIndex: "year",
      key: "year",
    },
    {
      title: "评分",
      dataIndex: "rating",
      key: "rating",
    },

    {
      title: "集数",
      dataIndex: "episodes",
      key: "episodes",
    },
    {
      title: "操作",
      key: "operation",
      render: (text, record) => (
        <>
          <Button
            type="link"
            onClick={() => props.onClickEdit && props.onClickEdit(record)}
          >
            编辑
          </Button>
          <Button
            type="link"
            danger
            onClick={() => onClickRemoveButton(record)}
          >
            删除
          </Button>
        </>
      ),
    },
  ];

  function onClickRemoveButton(record: SoapOpera) {
    Modal.confirm({
      title: "确认删除",
      content: "确认删除这部剧吗？",
      onOk: () => {
        if (props.onClickRemove) {
          props.onClickRemove(record);
        }
      },
    });
  }
  return (
    <Card bordered={false}>
      <Table<SoapOpera>
        size="small"
        columns={columns}
        dataSource={props.dataSource}
        rowKey={(record) => (record.id ? record.id.toString() : "")}
        pagination={{
          pageSize: props.pageSize,
          showSizeChanger: true,
          pageSizeOptions: ["10", "20", "30", "40"],
          showTotal: () => `共${props.total}条`,
          total: props.total,
          onChange: (page, pageSize) => {
            if (props.onChangePage) {
              props.onChangePage(page, pageSize);
            }
          },
        }}
      ></Table>
    </Card>
  );
}
export default TableComponent;
